<template>
    <div class="order-details-box">
        <div class="order-remark mar-b37">
            <div class="order-list-title">
                <span >运单备注</span>
            </div>
            <div class="order-list-content">
                <div class="padd-t12" v-for="item,index in orderDetailData.comment" :key="index">
                    <span class="mar-r12 color9B9B9B">{{item.created_at | datereg}}</span>
                    <span class="mar-r12 color9B9B9B">{{item.type_link}}备注:</span>
                    <span class="color4a4a4a"><span style="color: #009688;">[ {{item.user?item.user.name:''}} ]</span> {{item.content}}</span>
                </div>
                <div class="padd-t12">
                    <div style="margin-bottom: 10px">
                    <span class="add-comment" @click="showComment = !showComment">
                        <span style="padding-right: 4px">添加备注</span><i :class="!showComment?'el-icon-arrow-down':'el-icon-arrow-up'"></i>
                    </span>
                    </div>
                    <div style="width: 500px;" v-show="showComment">
                        <div>
                            <el-input type="textarea" v-model="remark" placeholder="请输入备注信息" autofocus rows="6" ></el-input>
                        </div>
                        <div  style="text-align: right;margin-top: 10px">
                            <el-button type="primary" @click="addComment(orderDetailData.id)">添加</el-button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="order-base mar-b37">
            <div class="order-list-title"><span >基础信息</span></div>
            <div class="order-list-content">
                <el-row class="order-base-list">
                    <el-col :span='10' class="padd-t12">
                        <span class="mar-r12 ">发件账户:</span>
                        <span class="color1989FA send_name" @click="$router.push({path:'/dialog/show/common.user/' + orderDetailData.user.id})">{{orderDetailData.user?orderDetailData.user.name + ' ' + orderDetailData.user.phone:''}}</span>
                    </el-col>
                    <el-col :span='9' class="padd-t12"><span class="mar-r12">下单时间:</span><span class="color4a4a4a">{{orderDetailData.created_at | datereg}}</span></el-col>
                    <el-col :span='5' class="padd-t12"><span class="mar-r12">当前状态:</span><span class="color4a4a4a">{{orderDetailData.status_link}}</span></el-col>
                </el-row>
                <el-row class="order-base-list">
                    <el-col :span='10'   class="padd-t12"><span class="mar-r12 ">货物规格:</span><span class="color4a4a4a">{{orderDetailData.product_comment?orderDetailData.product_comment.content:''}}</span></el-col>
                    <el-col :span='9'  class="padd-t12"><span class="mar-r12">重量:</span><span class="color4a4a4a">{{orderDetailData.total_weight}}kg</span></el-col>
                    <!--<el-col :span='5'  class="padd-t12"><span class="mar-r12">续重:</span><span class="color4a4a4a">2kg</span></el-col>-->
                </el-row>
                <el-row class="order-base-list">
                    <el-col :span='10'  class="padd-t12"><span class="mar-r12 ">叮咚码:</span><span class="color4a4a4a">{{orderDetailData.full_dingdong}}</span></el-col>
                    <el-col :span='14' class="padd-t12"><span class="mar-r12">运单编号:</span><span class="color4a4a4a">{{orderDetailData.express_number}}</span></el-col>
                </el-row>
            </div>
        </div>
        <div class="order-base mar-b37"  v-if="orderDetailData.parent_id >= 0">
            <div class="order-list-title">
                <span >子母单</span>
                <el-tooltip class="item" effect="dark" content="Top Left 提示文字" placement="top-start">
                    <i class="el-icon-question color1989FA fontsize16"></i>
                </el-tooltip>
            </div>
            <div class="order-list-content">
                <el-row class="order-base-list">
                    <el-col :span='10' class="padd-t12">
                        <span class="mar-r12">所属母单:</span>
                        <span class="color1989FA" v-if="orderDetailData.parent_id == 0">{{orderDetailData.express_number}}(当前)</span>
                        <span class="color1989FA son-order" @click="toDetail(orderDetailData.parent_id)" v-if="orderDetailData.parent_id > 0">{{orderDetailData.parent_order?orderDetailData.parent_order.express_number:''}}</span>
                    </el-col>
                    <el-col :span='14' class="padd-t12">
                        <span class="mar-r12 ">子单件数:</span>
                        <span class="color1989FA" v-if="orderDetailData.parent_id == 0">
                        共<span class="color1989FA" v-if="">{{orderDetailData.children_orders?orderDetailData.children_orders.length:'0'}}</span>件
                    </span>
                        <span class="color1989FA" v-if="orderDetailData.parent_id > 0">
                        共<span class="color1989FA" v-if="">{{orderDetailData.brothers_order?orderDetailData.brothers_order.length:'0'}}</span>件
                    </span>
                    </el-col>
                </el-row>
                <el-row class="order-base-list">
                    <el-col :span='3' style="width: 72px;"   class="padd-t12"><span>包含子单:</span></el-col>
                    <el-col :span="21"  v-if="orderDetailData.parent_id == 0">
                        <el-col :span='8'  class="padd-t12" v-for="item in orderDetailData.children_orders">
                            <span class="color9B9B9B" v-if="item.status < -1">{{item.express_number}}(已取消)</span>
                            <span class="color4a4a4a son-order" @click="toDetail(item.id)" v-else>{{item.express_number}}</span>
                        </el-col>
                    </el-col>
                    <el-col :span="21"  v-if="orderDetailData.parent_id > 0">
                        <el-col :span='8'  class="padd-t12" v-for="item in orderDetailData.brothers_order">
                            <span class="color9B9B9B" v-if="item.status < -1">{{item.express_number}}(已取消)</span>
                            <span class="color4a4a4a" v-else-if="orderDetailData.express_number == item.express_number">{{item.express_number}}(当前)</span>
                            <span class="color4a4a4a son-order" @click="toDetail(item.id)" v-else>{{item.express_number}}</span>
                        </el-col>
                    </el-col>
                </el-row>
            </div>
        </div>
        <div class="order-base mar-b37">
            <div class="order-list-title"><span>时效信息</span></div>
            <div class="order-list-content">
                <el-row class="order-base-list">
                    <el-col :span='8' class="padd-t12">
                        <span class="mar-r12 ">产品类型:</span>
                        <span class="color1989FA">{{orderDetailData.product?orderDetailData.product.title:''}}</span>
                        <el-tooltip class="item" effect="dark" content="Top Left 提示文字" placement="top-start">
                            <i class="el-icon-question color1989FA fontsize16"></i>
                        </el-tooltip>
                    </el-col>
                    <el-col :span='8' class="padd-t12">
                        <span class="mar-r12">期望取件时间:</span>
                        <span class="color4a4a4a">
                            <span>{{orderDetailData.forecast_pickup_time | datereg}}</span>-<span v-if="orderDetailData.product">{{(orderDetailData.forecast_pickup_time_timestamp + orderDetailData.product.pick_deviation) | pickTime}}</span>
                        </span>
                    </el-col>
                    <el-col :span='8' class="padd-t12">
                        <span class="mar-r12">期望送达时间:</span>
                        <span class="color4a4a4a">
                            <span>{{orderDetailData.forecast_complete_time | datereg}}</span>-<span  v-if="orderDetailData.product">{{(orderDetailData.forecast_complete_time_timestamp + orderDetailData.product.delivery_deviation) | pickTime}}</span>
                        </span>
                    </el-col>
                </el-row>
                <el-row class="order-base-list">
                    <el-col :span='8'   class="padd-t12"><span class="mar-r12 ">当前状态:</span><span class="color009688">{{orderDetailData.status_link}}</span></el-col>
                    <el-col :span='16'  class="padd-t12"><span class="mar-r12">时效评价:</span><span class="color4a4a4a">已经延期</span></el-col>
                </el-row>
            </div>
        </div>
        <div class="order-base mar-b37">
            <div class="order-list-title"><span>支付信息</span></div>
            <div class="order-list-content" style="border-bottom: 1px solid rgba(220,223,230,1);">
                <el-row class="order-base-list">
                    <el-col :span='8' class="padd-t12">
                        <span class="mar-r12 ">订单金额:</span>
                        <span class="color4a4a4a"> ¥ {{orderDetailData.price}}</span>
                    </el-col>
                    <el-col :span='8' class="padd-t12">
                        <span class="mar-r12">优惠渠道:</span>
                        <span class="color4a4a4a">
                            <span>-¥ {{orderDetailData.channel?orderDetailData.channel.name:'0.00'}}</span>
                        </span>
                        <el-tooltip class="item" effect="dark" content="Top Left 提示文字" placement="top-start">
                            <i class="el-icon-question color1989FA fontsize16"></i>
                        </el-tooltip>
                    </el-col>
                    <el-col :span='8' class="padd-t12">
                        <span class="mar-r12">卡券优惠:</span>
                        <span class="color4a4a4a" v-if="orderDetailData.coupon">
                            <span>-¥ {{orderDetailData.coupon.coupon?orderDetailData.coupon.coupon.less_price:'0.00'}}</span>
                        </span>
                        <el-tooltip class="item" effect="dark" content="Top Left 提示文字" placement="top-start">
                            <i class="el-icon-question color1989FA fontsize16"></i>
                        </el-tooltip>
                    </el-col>
                </el-row>
                <el-row class="order-base-list">
                    <el-col :span='8'   class="padd-t12"><span class="mar-r12 ">保价金额:</span><span class="color4a4a4a">+¥ {{orderDetailData.insurance?orderDetailData.insurance.price:'0.00'}}</span></el-col>
                    <!--<el-col :span='16'  class="padd-t12"><span class="mar-r12">续重金额:</span><span class="color4a4a4a">+&nbsp;¥&nbsp;2000.00</span></el-col>-->
                </el-row>
            </div>
            <div class="order-list-content">
                <el-row class="order-base-list">
                    <el-col :span='8'   class="padd-t12"><span class="mar-r12 ">应付金额:</span><span class="colorF12F1D">¥ {{orderDetailData.shipping_price}}</span></el-col>
                    <el-col :span='8'  class="padd-t12"><span class="mar-r12">实付金额:</span><span class="colorF12F1D">¥ {{orderDetailData.price}}</span></el-col>
                    <el-col :span='8'  class="padd-t12"><span class="mar-r12">待收货款金额:</span><span class="colorF12F1D">¥ {{orderDetailData.order_goods_payment?orderDetailData.order_goods_payment.total_price.toFixed(2):0}}</span></el-col>
                </el-row>
            </div>

        </div>
        <div class="order-send mar-b37">
            <div class="order-list-title"><span>配送信息</span></div>
            <div class="order-list-content">
                <el-row class="order-send-list">
                    <div class="order-left">
                        <div class="order-left-title">
                            <span>{{orderDetailData.pick_name}}</span>
                            <span>寄</span>
                        </div>
                        <div class="ball-left bordercolorsend">
                            <div class="ball-left-center"></div>
                        </div>
                        <div class="ball-right bordercolorsend">
                            <div class="ball-right-center"></div>
                        </div>
                        <el-row  class="order-left-content">
                            <el-col :span="24" style="padding-top: 6px">
                                <el-col :span="6" class="title">电话号码:</el-col>
                                <el-col :span="18" class="des">{{orderDetailData.pick_phone}}</el-col>
                            </el-col>
                            <el-col :span="24" style="padding-top: 6px">
                                <el-col :span="6" class="title">取件时间:</el-col>
                                <el-col :span="18" class="des">{{orderDetailData.forecast_pickup_time}}</el-col>
                            </el-col>
                            <el-col :span="24" style="padding-top: 6px">
                                <el-col :span="6" class="title">目的地:</el-col>
                                <el-col :span="18" class="des">{{orderDetailData.pick_address}} {{orderDetailData.pick_address_add}}</el-col>
                            </el-col>

                        </el-row>
                    </div>
                    <div class="order-center"></div>
                    <div class="order-right">
                        <div class="order-left-title">
                            <span>{{orderDetailData.delivery_name}}</span>
                            <span>收</span>
                        </div>
                        <div class="ball-left bordercolorrec">
                            <div class="ball-left-center"></div>
                        </div>
                        <div class="ball-right bordercolorrec">
                            <div class="ball-right-center"></div>
                        </div>
                        <el-row  class="order-left-content">
                            <el-col :span="24" style="padding-top: 6px">
                                <el-col :span="6" class="title">电话号码:</el-col>
                                <el-col :span="18" class="des">{{orderDetailData.delivery_phone}}</el-col>
                            </el-col>
                            <el-col :span="24" style="padding-top: 6px">
                                <el-col :span="6" class="title">送达时间:</el-col>
                                <el-col :span="18" class="des">{{orderDetailData.forecast_complete_time}}</el-col>
                            </el-col>
                            <el-col :span="24" style="padding-top: 6px">
                                <el-col :span="6" class="title">目的地:</el-col>
                                <el-col :span="18" class="des">{{orderDetailData.delivery_address}} {{orderDetailData.delivery_address_add}}</el-col>
                            </el-col>

                        </el-row>
                    </div>
                </el-row>
            </div>
        </div>
        <div class="order-remark mar-b37">
            <div class="order-list-title">
                <span >修改记录</span>
            </div>
            <div class="order-list-content" v-if="orderDetailData.update_record">
                <div class="padd-t12" v-for="(item,index) in orderDetailData.update_record[0]" :key="index" >
                    <div class="color9B9B9B">{{item}}</div>
                    <!--<span class="mar-r12">12/10 16:10</span>-->
                    <!--<span class="mar-r12">管理员王二狗:</span>-->
                    <!--<span class="colorF12F1D">修改用户112电话为110</span>-->
                </div>
            </div>
            <!--<div  class="order-list-content" style="padding-top: 10px" v-else>-->
                <!--无-->
            <!--</div>-->
        </div>
        <div class="order-sign mar-b37">
            <div class="order-list-title">
                <span >签收详情</span>
            </div>
            <div class="order-list-content">
                <div class="padd-t12">
                    <span class="mar-r12">下单时间:</span>
                    <span class="color4A4A4A">{{orderDetailData.created_at}}</span>
                </div>
                <div class="padd-t12">
                    <span class="mar-r12">签收时间:</span>
                    <span class="color4A4A4A">{{orderDetailData.order_related_info?orderDetailData.order_related_info.completed_at:''}}</span>
                </div>
                <div class="padd-t12">
                    <span class="mar-r12">签收方式:</span>
                    <span class="color4A4A4A">{{orderDetailData.order_related_info?typeName[orderDetailData.order_related_info.type]:''}}</span>
                </div>
                <div class="padd-t12 el-row--flex">
                    <div class="mar-r12" style="flex:0 0 66px">签收照片:</div>
                    <div v-if="!!orderDetailData.order_related_info&&orderDetailData.order_related_info.type==4">
                        <img class="check-img" v-for="(item,index) in orderDetailData.order_related_info.info" :src="imgUrl+item" alt="">
                    </div>
                </div>
                <div class="padd-t12 order-sign-box" v-if="orderDetailData.order_related_info">
                    <!--<div class="order-sign-img" v-for="item in orderDetailData.order_related_info.info"><img :src="'http://dev.dml3.ddchuansong.com/api/admin/' + item" alt=""></div>-->
                    <!--<div class="order-sign-img"></div>-->
                    <!--<div class="order-sign-img"></div>-->
                    <!--<div class="order-sign-img"></div>-->
                    <!--<div class="order-sign-img"></div>-->
                </div>
            </div>
        </div>
        <!--<div class="order-base mar-b37">-->
            <!--<div class="order-list-title">-->
                <!--<span >运单评价</span>-->
            <!--</div>-->
            <!--<div class="order-list-content">-->
                <!--<el-row class="order-base-list">-->
                    <!--<el-col :span='12'  class="padd-t12">-->
                        <!--<span class="mar-r12">12/10 16:10</span>-->
                        <!--<span class="mar-r12">配送评价:</span>-->
                        <!--<span class="color4A4A4A">虽然迟到了但配送员帅，别处罚了</span>-->
                    <!--</el-col>-->
                    <!--<el-col :span="12" class="padd-t12" style="display: flex;">-->
                        <!--<span>服务评价:</span>-->
                        <!--<span style="padding-left: 10px">-->
                            <!--<el-rate-->
                                    <!--v-model="rate"-->
                                    <!--disabled-->
                                    <!--show-score-->
                                    <!--text-color="#ff9900"-->
                                    <!--score-template="{value}">-->
                            <!--</el-rate>-->
                        <!--</span>-->
                    <!--</el-col>-->
                <!--</el-row>-->
            <!--</div>-->
        <!--</div>-->
        <div class="order-remark mar-b37">
            <div class="order-list-title">
                <span >路由信息</span>
            </div>
            <div class="order-list-content">
                <div class="order-list-cloud">
                    <!--<div class="order-list-cloud-title">概括</div>-->
                    <!--<el-row style="padding: 12px 0;line-height: 28px;">-->
                        <!--<el-col :span="24" class="padd-left52" >-->
                            <!--<el-col :span="12">指派总耗时：135分钟</el-col>-->
                            <!--<el-col :span="12">指派总耗时：135分钟</el-col>-->
                        <!--</el-col>-->
                        <!--<el-col :span="24" class="padd-left52">-->
                            <!--<el-col :span="12" class="order-list-dot">-->
                                <!--<div class="dot"></div>-->
                                <!--<div class="name">[米谢]</div>-->
                                <!--<div>指派总耗时：135分钟</div>-->
                            <!--</el-col>-->
                            <!--<el-col :span="12" class="order-list-dot">-->
                                <!--<div class="dot"></div>-->
                                <!--<div class="name">[米谢]</div>-->
                                <!--<div>指派总耗时：135分钟</div>-->
                            <!--</el-col>-->
                        <!--</el-col>-->
                    <!--</el-row>-->
                    <!--<div class="order-list-cloud-footer colorF12F1D">延迟送达：1335分钟</div>-->
                </div>
                <div class="order-list-router" v-if="orderDetailData.order_routers">
                    <div class="order-list-lie" v-for="(item1,index1) in orderDetailData.order_routers" :key="index1">
                        <div class="order-list-lie-left">
                            <div class="order-router-box-title">{{item1.typeName}}</div>
                        </div>
                        <div class="order-router-box" v-for="(item2,index2) in item1.routers" v-if="item1.routers" :key="index2">
                            <div class="order-router-box-box">
                                <div class="order-router-box-box-title">
                                    <div class="color1989FA">[{{item2.name}}]</div>
                                    <div ><a class="order-router-box-box-phone" :href="'tel:'+item2.phone">{{item2.phone}}</a></div>
                                    <!--<div v-else><a class="order-router-box-box-phone" :href="'tel:'+item2.phone">{{item2.phone}}</a></div>-->
                                    {{item2.comment}}
                                </div>
                                <div class="order-router-box-box-des">{{item2.created_at | datereg}}</div>
                            </div>
                            <div class="order-router-ball colorFF8D00">{{item2.routerType}}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="order-btn">
            <el-button type="default" class="default" @click="cancelOrder(orderDetailData.id)">取消运单</el-button>
            <el-button type="primary" class="primary"  @click="changeOrder(orderDetailData.id)">修改运单</el-button>
        </div>
    </div>
</template>
<script>
    export default {
        props: {
            orderDetail: {
                type: Object | Array,
                default: () => {
                    return {}
                }
            }
        },
        data() {
            return {
                imgUrl:"",//图片域名
                url: '',
                rate: 3.7,
                showComment: false,
                remark:'',
                typeName:[
                  "无需操作",
                  "扫码完成",
                  "验证码签收",
                  "短信签收",
                  "拍照签收",
                  "电子签名",
                  "货到付款",
                  "代收货款",
                  "货到全款"
                ],//暂时写死，后期看是否需要created阶段请求获取
            }
        },
        created(){
          this.imgUrl='http://dml-express.oss-cn-beijing.aliyuncs.com/';
        },
        computed: {
            orderDetailData: function () {
                if (this.orderDetail.order_routers && this.orderDetail.order_routers.length>0) {
                    this.orderDetail.order_routers.forEach(item=>{
                        if (item.routers && item.routers.length>0) {
                            item.routers.reverse();
                        }
                    });
                }
                return this.orderDetail;
            }
        },
        filters: {
            datereg(val) {
                if (val) {
                    return val.slice(5,16);
                }
            },
            reves(val) {
                if (val) {
                    return val.reverse();
                }
            },
            pickTime(val) {
                if (val) {
                    let date = new Date(val * 1000);
                    let h = date.getHours();
                    let r = ':';
                    let m = date.getMinutes();
                    if (h < 10) {
                        h = "0" + h;
                    }
                    if (m < 10) {
                        m = "0" + m;
                    }
                    return h + r + m;
                }
            }
        },
        mounted() {
            this.url = window.location.origin;
        },
        methods: {
            addComment(id) {
                let params = {
                    order_id: id,
                    comment: this.remark
                };
                this.$http.post('express/order_comment',params)
                    .then((response) => {
                        this.$message.success('添加备注成功！');
                        this.showComment = false;
                        this.remark = '';
                        this.$store.commit('refreshDialog');
                    })
                    .catch((error) => {
                        if (error.response.data.msg) {
                            this.$message.error(error.response.data.msg);
                        } else {
                            this.$message.error('请求错误：' + error.response.status);
                        }
                    });
            }, // 添加备注
            cancelOrder(id) {
                this.$router.push({path:'/dialog/cancel/express.order/' + id});
            },
            changeOrder(id) {
                this.$router.push({path:'/dialog/edit/express.order/' + id});
            },
            toDetail(id) {
                this.$router.push({path:'/order/detail/' + id});
            }
        }
    }
</script>
<style lang="less" scoped>
    .order-details-box {
        color: #000;
        line-height: 20px;
        font-size: 14px;
        .send_name{
            cursor: pointer;
        }
        .add-comment:hover{
            color: #1989FA;
            cursor: pointer;
        }
        .son-order:hover{
            cursor: pointer;
            color: #1989FA;
            text-decoration: underline;
        }

        .order-remark,.order-send,.order-base,.order-sign,.order-btn{
            background-color: #fff;
            border-radius: 3px;
            overflow: hidden;
        }
        .order-btn{
            padding: 27px 0 26px 0;
        }
        .order-sign{
            .order-sign-box{
                overflow: hidden;
                /*white-space: nowrap;*/
                /*display: flex;*/
                .order-sign-img{
                    width: 288px;
                    height: 193px;
                    border-radius: 3px;
                    float: left;
                    margin-bottom: 20px;
                    margin-right: 20px;
                    background-color: #eee;
                }
            }

        }
        .order-send{
            height: 100%;
            .order-send-list{
                margin-top: 19px;
                height: 100%;
                display: flex;
                /*align-items: center;*/
                /*justify-content: center;*/
                .order-center{
                    width: 90px;
                    min-height: 160px;
                    background: url("../../../assets/img/fangxiang@2x.png")  center center no-repeat;
                    background-size: 27px 16px;
                }
                .order-left ,.order-right{
                    width:375px;
                    /*height:148px;*/
                    min-height: 214px;
                    position: relative;
                    box-sizing: border-box;
                    background:rgba(255,255,255,1);
                    box-shadow:0px 2px 3px 0px rgba(0,0,0,0.15);
                    border:1px solid rgba(95,184,120,1);
                    border-radius: 4px;
                    color:rgba(0,0,0,1);
                    /*overflow: hidden;*/
                    .ball-left{
                        width: 24px;
                        height: 24px;
                        border-radius: 50%;
                        background-color: #fff;
                        position: absolute;
                        z-index: 10;
                        top: 34px;
                        left: -14px;
                        .ball-left-center{
                            width: 30px;
                            height: 30px;
                            background-color: #fff;
                            position: absolute;
                            overflow: hidden;
                            z-index: 12;
                            top: -4px;
                            left: -18px;
                        }
                    }

                    .ball-right{
                        width: 24px;
                        height: 24px;
                        border-radius: 50%;
                        background-color: #fff;
                        position: absolute;
                        z-index: 10;
                        top: 34px;
                        right: -14px;
                        .ball-right-center{
                            width: 30px;
                            height: 30px;
                            background-color: #fff;
                            position: absolute;
                            overflow: hidden;
                            z-index: 12;
                            top: -2px;
                            right: -18px;
                        }
                    }
                    .bordercolorsend{
                        border:1px solid rgba(95,184,120,1);
                    }
                    .bordercolorrec{
                        border:1px solid #ff8d00;
                    }
                    .order-left-title{
                        display: flex;
                        justify-content: space-between;
                        line-height:22px;
                        font-size: 21px;
                        padding: 14px 17px 11px 24px;
                        border-bottom:1px dashed rgba(238,238,238,1)
                    }
                    .order-left-content{
                        line-height: 30px;
                        padding: 6px 17px 2px 17px;
                        .title{

                            font-size: 15px;
                            color: rgba(74,74,74,1);
                        }
                        .des{
                            font-size: 15px;
                            color: #000;
                        }
                    }
                }
                .order-right{
                    background:rgba(255,255,255,1);
                    box-shadow:0px 2px 3px 0px rgba(0,0,0,0.15);
                    border:1px solid rgba(255,141,0,1);
                }
            }
        }
        .order-list-title{
            width: 100%;
            padding: 10px 0 10px 83px;
            color:rgba(0,0,0,0.85);
            font-size:20px;
            line-height:39px;
            border-bottom:1px solid rgba(220,223,230,1)
        }
        .order-list-content{
            font-size: 15px;
            padding: 0px 10px 21px 80px;
          .order-list-router{
            height: 100%;
            .order-list-lie{
              height: auto;
              padding: 2px 0 2px 80px;
              overflow: hidden;
              position: relative;
              /*display: flex;*/
              .order-list-lie-left{
                overflow: hidden;
                float: left;
                height: 75px;
                .order-router-box-title{
                  position: absolute;
                  left: 50px;
                  top: 30px;
                  width: 35px;
                  height: 35px;
                  background-color: #009688;
                  border-radius: 50%;
                  text-align: center;
                  line-height: 36px;
                  font-size:20px;
                  color: #fff;
                }
              }

              .order-router-box{
                margin-bottom: 20px;
                width: 232px;
                padding: 0 10px;
                min-height: 95px;
                float: left;
                background:url("../../../assets/img/zuobian@2x.png") 20px center no-repeat;
                background-size: 18px 11px;
                position: relative;
                .order-router-ball{
                  position: absolute;
                  top: 6px;
                  left: 18px;
                  width: 24px;
                  height: 24px;
                  text-align: center;
                  font-size: 16px;
                  line-height: 26px;
                  border-radius: 50%;
                  color: #fff;
                }
                .order-router-box-box{
                  text-align: center;
                  min-width: 165px;
                  height: 100%;
                  box-shadow:0px 0px 4px 0px rgba(0,0,0,0.15);
                  border-radius:2px;

                  .order-router-box-box-title{
                    font-size: 16px;
                    padding: 6px 10px 6px 28px;
                  }
                  .order-router-box-box-des{
                    color: #9B9B9B;
                    padding:0 10px 0 28px;
                  }
                  .order-router-box-box-phone{
                    color: #1989FA;
                  }
                }
              }
            }
          }
            .order-list-cloud{
                min-width:500px;
                max-width: 621px;
                background:rgba(255,255,255,1);
                box-shadow:0px 1px 6px 0px rgba(155,155,155,0.26);
                border-radius:2px;
                margin: 38px 0 42px 146px;
                padding: 0 17px;
                font-size: 14px;
                .order-list-dot{
                    display: flex;
                    align-items: center;
                    .dot{
                        width:12px ;
                        height: 12px;
                        margin-right:10px ;
                        background-color:#1989FA ;
                        border-radius: 50%;
                    }
                    .name{
                        padding-right: 4px;
                        color: #1989FA;
                    }
                }

                .order-list-cloud-title,.order-list-cloud-footer{
                    height: 52px;
                    font-size: 20px;
                    line-height: 52px;
                    text-align: center;

                }
                .order-list-cloud-title{
                    border-bottom:1px solid rgba(238,238,238,1)
                }
                .order-list-cloud-footer{
                    border-top:1px solid rgba(238,238,238,1)
                }
            }
        }
        .order-btn{
            text-align: center;
            .default{
                background:rgba(25,137,250,0.07);
                border-radius:4px;
                border:1px solid #009688;
                color:#009688;
                margin-right: 30px;
            }
            .primary{
                background:#009688 ;
                border:1px solid rgba(24,144,255,1);
                border-radius:4px;
                color:rgba(255,255,255,1);
            }
        }
        .mar-b37{
            margin-bottom: 14px;
        }
        .mar-l16{
            margin-left: 16px;
        }
        .padd-t12{
            padding-top: 16px;
        }
        .mar-r12{
            margin-right: 12px;
        }
        .mar-r113{
            margin-right: 113px;
        }
        .fontsize16{
            font-size: 16px;
            margin-left: 4px;
        }
        .color4a4a4a{
            color: #4A4A4A;
        }
        .color009688{
            color: #009688;
        }
        .color1989FA{
            color: #1989FA;
        }
        .color9B9B9B{
            color: #9B9B9B;
        }
        .colorF12F1D{
            color: #F12F1D;
        }
        .colorFF8D00{
            background-color: #FF8D00;
        }
        .colorFF5722{
            background-color: #FF5722;
        }
        .color08979C{
            background-color: #08979C;
        }
        .color389E0D{
            background-color: #389E0D;
        }
        .padd-left52{
            padding-left: 52px;
        }
        .check-img{
            min-width: 320px;
            min-height: 180px;
            max-width: 1000px;
        }
    }
</style>

